<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<view class="group_1 flex-col">

			<view class="block_5 flex-col ">
				<view class="swiper">
					<image :src="dataInfo.image" mode=""></image>
				</view>
			</view>

			<view class="block_6 flex-col">
				<view class="block_7 ">
					<text class="text_8">{{dataInfo.name}}</text>
					<view class="block_8 flex-row" style="    align-items: center;">
						<text class="block_8-price">
							<text style="font-size: 24rpx;">￥</text>

							{{dataInfo.price}}</text>
						<text class="block_8-oldPrice">￥{{dataInfo.cost}}</text>
					</view>
				</view>
				<view class="block_20 flex-col">
					<view class="text_36">团购详情</view>
					<view class="block_20-tab">
						<uni-table border stripe emptyText="暂无更多数据">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th width="100" align="center">菜品</uni-th>
								<uni-th width="100" align="center">数量</uni-th>
								<uni-th width="100" align="center">售价</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in dataInfo.item" :key="index">
								<uni-td align="center">{{item.name}}</uni-td>
								<uni-td align="center">{{item.num}}</uni-td>
								<uni-td align="center">{{item.price}}</uni-td>
							</uni-tr>


						</uni-table>

					</view>

				</view>
				<view class="block_20 flex-col">
					<view class="text_36">购买须知</view>
					<view class="block_20-tab">

						<jyf-parser :html="dataInfo.description" ref="article" :tag-style="tagStyle"></jyf-parser>


					</view>

				</view>
			</view>

		</view>
		<view class="ding">

		</view>
		<view class="footer">
			<view class="footer-btn" @click="submit">
				立即抢购
			</view>

		</view>
		<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
		<uni-popup ref="safeguardPup" type="bottom">

			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">

				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>

				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="dataInfo.name" :des="dataInfo.description"
			:headerImg="dataInfo.image" :subTitle='"￥"+dataInfo.price'></qrcode-poster>

		<home></home>
	</view>
</template>
<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import {

		getUserInfo,

	} from "@/api/user";
	import payment from '@/components/payment/index.vue'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getApplyCateringOrderCreate,
		getApplyCateringProductInfo
	} from '@/api/togeterRich/index.js'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker,
			"jyf-parser": parser,
			payment,
			home,
			QrcodePoster
			

		},
		data() {
			return {
				
				orderNo: '',
				scene: '',
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				allPrice: 0,
				preOrderNo: '',
				id: '',
				sid: '',
				dataInfo: {},
				islookMorePup: 0,
				showPicker: false,

				range: ['2023/01/01', '2023/01/06'],

				type: 'rangetime',
				value: '',
				constants: {

				},
			};
		},
		onLoad(e) {
			this.id = e.id
			this.sid = e.sid
			this.init()
		},
		methods: {
			saveImgeOK(){
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;

				}
			},
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				getApplyCateringProductInfo(this.id).then(res => {
					console.log(res, 'dd')
					this.dataInfo = res.data
				})
			},
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun(e) {
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({

									url: '/pagesB/catering/index?status=10'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				}
				this.pay_close = false;

			},
			submit() {
				let data = {
					payChannel: 'routine',
					payType: "yue",
					productId: this.dataInfo.id,
					storeId: this.sid
				}
				getApplyCateringOrderCreate(data).then(res => {
					console.log(res, '创建订单')
					this.orderNo = res.data.orderNo
					this.scene = res.data.scene
					this.goPay()
				})
				return;

			},
			goPage() {
				uni.navigateTo({
					url: "/pagesA/BeautifulEconomy/homestayPay"
				})
			},
			lookMore(type) {
				this.islookMorePup = type

				this.$refs.lookMorePup.open()
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			openLocation() {
				uni.openLocation({
					latitude: 30.18534, // 目标纬度
					longitude: 120.26457, // 目标经度
					name: '目标位置',
					address: '目标位置的地址',
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx 0;

		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}

	.block_20-tab {
		margin-top: 20rpx;

		.block_20-tab-des {
			font-size: 26rpx;
			color: #999;
		}
	}

	.block_8-price {
		color: $maincolor;
		font-size: 44rpx;
	}

	.block_8-oldPrice {
		font-size: 24rpx;
		margin-left: 20rpx;
		color: #999;
		text-decoration: line-through;
		text-decoration-style: solid;
	}


	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	@import '@/pagesA/BeautifulEconomy/com/homstayInfo.css';

	@import '@/com/css/common.css';
</style>